<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 
			1、Dom模型
				概述
					Dom模型中将Html文档按照树形结构加载到内存中，并且允许开发人员进行操作结构中的各元素对象
				查找元素
				
				获取/设置元素的内容
				
				获取/设置元素的属性
		-->
		

	</head>
	<body>
		<div>
			<p><span>欢迎</span>使用学生管理平台</p>
			<label>姓名：</label>
			<input type="text" id="userName" class="txt" value="李佳"/><br  />
			<label>性别：</label>
			<input type="radio" name="gender" />男
			<input type="radio" name="gender" />女 <br  />
			
			<img id="photo"  />
		</div>

	</body>
	
	<script type="text/javascript">
		//1、获取元素对象
		/*
		//按照Id可以获取到一个元素对象
		//getElementById():返回一个元素对象，可以直接进行使用
		var obj_name = document.getElementById("userName");
		console.log("obj_name = " + obj_name);
		
		//按照name值获取元素对象
		//getElementsByName():返回的是一个元素的数组对象，使用时需要通过下标来进行访问
		var obj_gender = document.getElementsByName("gender");
		console.log("obj_gender=" + obj_gender + "  | " + obj_gender.length);
		
		//按照class属性获取元素对象，返回结果为一个数组对象
		//document.getElementsByClassName("txt");
		//按照标签名获取元素对象，返回结果为一个数组对象
		document.getElementsByTagName("input")
		*/
	</script>
	
	<script type="text/javascript">
		//2、获取/设置元素对象的值	
		var userName=document.getElementById("userName");
		//value属性：获取或设置元素的value值
		//获取元素的value值
		console.log("value=" + userName.value);
		
		//设置元素的value值
		userName.value = "haha~~~~";
		
		//3、获取/设置元素的文本内容
		var objP = document.getElementsByTagName("p");
		console.log("objP.length=" + objP.length);
		
		//获取p标签的元素值
		//innerText和innerHTML的区别
		//innerText只返回元素内的所有文本内容(包含子元素的文本内容)，标签内容将被剔除
		console.log("innerText:" + objP[0].innerText);
		//innerHTML可以返回元素的标签内容及文本内容
		console.log("innerHTML" + objP[0].innerHTML);
		
		
		objP[0].innerText="Hello InnerText.....";
		objP[0].innerHTML="Hello InnerHtml~~~~~";
		
		//4、获取或设置元素的属性
		//获取元素对象
		var photo = document.getElementById("photo");
		console.log("id=",photo.getAttribute("id"));
		console.log("src=",photo.getAttribute("src"));
		
		//设置元素的属性值
		photo.setAttribute("src","images/1.jpg");
		photo.setAttribute("width","50");
		
		//移除元素的属性值
		photo.removeAttribute("src");
	</script>
</html>
